<template>
  <div class="app-sidebar">
    <div class="brand">
      <span>[</span>
      bracket
      <span>]</span>
      <i>plus</i>
    </div>
    <div class="content">
      <div class="scroll-bar">
        <h5 class="sidebar-label">菜单导航</h5>
        <ul class="sidebar-menu">
          <li
            class="menu-item"
            v-for="item in menuList"
            :key="item.id"
          >
            <div class="menu-item-handle" @click="toggleActive(item)">
              <span class="menu-item-icon iconfont" v-html="item.icon"></span>
              <span class="menu-item-label">{{item.label}}</span>
              <i class="menu-item-arrow iconfont">&#xe7eb;</i>
            </div>
            <ul class="sub-menu" v-show="item.isShow">
              <li
                v-for="itemInner in item.children"
                :key="itemInner.id"
              >
                <div class="sub-item-handle">
                  <span class="sub-item-icon"></span>
                  <span class="sub-item-label">{{ itemInner.label }}</span>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Sidebar',
  data () {
    return {
      isActive: true,
      menuList: [
        {
          id: 1,
          label: '案件监控',
          icon: '&#xe7de;',
          isShow: false,
          children: [
            {
              id: 11,
              label: '运营监控'
            },
            {
              id: 12,
              label: '运营监控'
            }
          ]
        },
        {
          id: 2,
          label: '保单承保',
          icon: '&#xe790;',
          isShow: false,
          children: [
            {
              id: 21,
              label: '保单配置'
            },
            {
              id: 22,
              label: '服务自动化配置'
            }
          ]
        }
      ] 
    }
  },
  methods: {
    toggleActive (item) {
      item.isShow = !item.isShow
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~styles/varible.styl'
.app-sidebar
  width: $sidebar-width
  background-color $bg-dark
  display flex
  flex-direction column
  .brand
    box-sizing: border-box
    height $sidebar-brand-height
    font-size 20px
    font-weight: 700
    line-height $sidebar-brand-height
    text-align: center
    border-right: 1px solid rgba(255,255,255,.2)
    color: #fff
    background-color: darken($bg-primary, 10%)
    > i
      font-style: normal
      color: rgba(255,255,255,.75)
  .content
    display flex
    flex 1
    min-height 0
  .sidebar-label
    padding: 15px
    font-size 14px
    color: rgba(255,255,255,.2)
  .sidebar-menu
    border-top: 1px solid rgba(255,255,255,.1)
    transition: all 0.2s ease-in-out
    li
      color: #868e96
  .menu-item
    position relative
    .menu-item-handle
      padding: 10px
      transition: all 0.2s ease-in-out
      border-bottom: 1px solid rgba(255,255,255,.1)
      cursor: pointer
      &:hover,
      &:focus
        color: #fff
        background-color: rgba(255,255,255,.05)
  .menu-item-icon
    display inline-block
    margin-right: 10px
    vertical-align: middle
    font-size: 20px
    transition: all 0.2s ease-in-out
  .menu-item-label
    display: inline-block
    vertical-align: middle
    font-weight: 700
    white-space: nowrap
  .menu-item-arrow
    float: right
    font-size:12px;
    color: #868e96
    transition: all 0.2s ease-in-out
  .sub-menu
    padding : 4px 10px
    border-bottom: 1px solid rgba(255,255,255,.1)
    .sub-item-handle
      position: relative
      padding: 8px 0 8px 34px
      color: #adb5bd
      cursor: pointer
    .sub-item-icon
      position: absolute
      top: 50%
      left: 10px
      margin-top: -.5px
      margin-left: -2.5px
      width: 5px
      height: 1px
      background-color: #fff
      opacity: .5
      transition: all 0.2s ease-in-out
    .sub-item-handle:hover,
    .sub-item-handle:focus
      .sub-item-icon
        width: 20px
        margin-left: -10px
        background-color: $bg-primary
      .sub-item-label
        color: $bg-primary
</style>
